<template>
  <div class="container">
    <div class="nav">
      <van-nav-bar title="团购专区" @click-left="()=>$router.push('/main')" left-arrow>
        <template #left>
          <van-icon name="arrow-left" color="black" size="1rem" />
        </template>
      </van-nav-bar>
    </div>
    <div class="content">
      <ul class="goodsList">
        <li v-for="(item,inx) in goodsList" :key="inx">
          <img :src="item.logo" alt />
          <div class="goodsLeft">
            <span class="goodsTitle">{{item.title}}</span>
            <div>
              <div class="price">
                <del>￥{{item.price}}</del>
                <span>团购价：￥{{item.activityPrice}}</span>
              </div>
              <div class="toBuy">
                <span>去团购</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon } from "vant";
export default {
  components: {
    "van-nav-bar": NavBar,
    "van-icon": Icon
  },
  data() {
    return {
      goodsList: [
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/9/common/images/20200420/20200420102738158734965884973_mid.jpg",
          title: "2020年夏新款粉色网纱草莓亮片荷叶边系带短袖V领度假长裙",
          price: "50.00",
          activityPrice: "45.00"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/9/common/images/20200420/20200420115612158735497285781_mid.jpg",
          title: "向日葵花束生日配送鲜花速递",
          price: "10.00",
          activityPrice: "5.00"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/9/common/images/20200420/20200420103609158735016910945_mid.jpg",
          title: "连衣裙2020春夏新款法国设计感小众气质舒适中长款修身收腰衬衫裙",
          price: "150.50",
          activityPrice: "120.50"
        }
      ]
    };
  },
  methoods: {}
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #f7f7f7;
}
.nav {
  height: 2.3rem;
}
.content {
  padding: 0 0.4rem;
  .goodsList {
    li {
      margin-top: 0.6rem;
      background-color: white;
      padding: 0.4rem;
      display: flex;
      border-radius: 0.4rem;

      > img {
        width: 6rem;
        height: 6rem;
      }
      .goodsLeft {
        width: calc(100% - 6rem);
        box-sizing: border-box;
        padding-left: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        > div {
          display: flex;
          justify-content: space-between;
          font-size: 0.65rem;
        }
        .goodsTitle {
          font-size: 0.65rem;
          font-weight: 700;
          color: #222;
        }
        .price {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          del {
            color: #898989;
          }
          span {
            color: #ff335c;
          }
        }
        .toBuy {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          span {
            padding: 0.2rem 0.4rem;
            border: 1px solid #ddd;
            border-radius: 0.25rem;
          }
          // border-radius: 0.25rem;
          // border: 1px solid #ddd;
          // padding: 0.2rem 0.4rem;
        }
      }
    }
  }
}
</style>